<template>
	<!-- 用户选课中心，课程详情 -->
	<div class="weui-panel" style="height: 100%;width: 100%;">
		<div class="weui-panel__hd imgs" style="height: 20%;width: 100%;padding: 0 0;">
		</div>
		<div class="weui-panel__bd" style="height: 72%;overflow: auto;border-radius:5px 5px 0 0">
			<a class="weui-cells">
				<div class="weui-cell">
					<ul class="weui-media-box__info">
						<li class="weui-media-box__info__meta">类型：{{caseTypeInfo.caseTypeName}}</li>
						<li class="weui-media-box__info__meta">课程名：{{caseInfo.caseName}}</li>
						<li class="weui-media-box__info__meta">购买人数：10</li>
						<li class="weui-media-box__info__meta weui-media-box__info__meta_extra">上课时间：2小时</li>
					</ul>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__bd" style="text-align: left;margin-left: 0.625rem;">
						课程单价￥<span
							style="text-decoration: line-through;color: #585858;">{{caseTypeInfo.caseSale}}</span>
						￥：<span style="color: #ce0b0e;">{{caseTypeInfo.caseSaleDz}}</span>
					</div>
				</div>
			</a>
			<div style="height: 8px;background-color: #f0f0f0;"></div>
			<div class="weui-panel__bd" style="height: 100%;">
				<div style="text-align: left;margin-left: 0.9375rem;font-size: 1.25rem;">教师介绍</div>

				<div class="weui-media-box weui-cell_swiped " v-for="(item,index) in staffList">
					<a class="weui-media-box weui-media-box_appmsg">
						<div class="weui-media-box__hd">
							<img class="weui-media-box__thumb" src="../../assets/img/1.jpeg" alt="">
						</div>
						<div class="weui-media-box__bd">
							<h4 class="weui-media-box__title" style="text-align: left;font-size: 10px;">{{item.name}}
							</h4>
							<h4 class="weui-media-box__title" style="text-align: left;font-size: 10px;">5年经验</h4>
						</div>
					</a>
					<div class="weui-media-box__desc"
						style="-webkit-line-clamp: 3;height: auto; word-wrap: break-word;word-break: break-all;margin-left: 2.875rem;">
						　　{{item.staffDesc}}
					</div>
				</div>



				<div style="height: 8px;background-color: #f0f0f0;"></div>
				<div style="text-align: left;margin-left: 0.9375rem;font-size: 1.25rem;">课程介绍</div>
				<h3 style="text-align: left;margin: 0.9375rem 0.9375rem;">简介</h3>
				<p style="margin-left: 1.875rem;">
					{{caseInfo.caseDesc}}
				</p>
				<div style="height: 8px;background-color: #f0f0f0;"></div>
				<h4 style="text-align: left;margin: 0.9375rem 0.9375rem;">学习目标</h4>
				<p style="margin-left: 1.875rem;border-bottom: 1px solid;">
					{{caseInfo.caseDist}}
				</p>
				<h4 style="text-align: left;margin: 0.9375rem 0.9375rem;">适合人群</h4>
				<p style="margin-left: 1.875rem;border-bottom: 1px solid;">
					{{caseInfo.casePeople}}
				</p>
				<a class="weui-cell ">
					<div class="weui-cell__hd" style="margin-left: 10px;">
						<span>更详细介绍请联系老师咨询</span>

					</div>
				</a>
			</div>
		</div>
		<div class="weui-panel__ft" style="height: 8%;">
			<a class="weui-cell" style="height: 100%;padding: 0;">
				<div @click="clickCollect" class="weui-media-box__bd " style="width: 15%;height: 100%;margin-top: 0.3125rem;">
					<img  style="height: 40%;margin-top: 0.312rem;" :src="collectImgPath"
						v-bind:class="{ active: isCollect, 'text-red': 'text-white' }" />
					<p class="weui-media-box__desc" style="margin-top: -0.725rem;">想学</p>
				</div>
				<div @click="showChat" class="weui-media-box__bd " style="width: 15%;height: 100%;margin-top: 0.3125rem;">
					<img style="height: 40%;margin-top: 0.312rem;" src="../../assets/img/wx/chat.png" />
					<p class="weui-media-box__desc" style="margin-top: -0.725rem;">咨询</p>
				</div>
				<button style="width: 70%;" class="btn">点击购买</button>
			</a>
		</div>
		<!-- 弹框购买 ,体验课，可以一节一节买，小班必须5的倍数，10起步-->
		<div class="dialogMain" style="margin-top: 0;" v-if="showChatFlag" @click="hideChat">
			<div class="weui-panel" style="background-color: white;">
				<div class="weui-panel__hd">快速咨询通道</div>
				<div class="weui-panel__bd">
					<img width="70%" height="50%" :src="qrcodePath" />
						<div class="weui-cell__hd">
							微信号
						</div>
						<div class="weui-cell__bd">12fdsafase</div>
				</div>
			</div>
		</div>

		<!-- <div class="weui-panel dialogMain" style="margin-top: 0;">

			<a class="weui-cells">
				<a class="weui-cell">
					<div class="weui-cell__hd">
						课程节数
					</div>
					<div class="weui-cell__bd"
						style="margin-left: 1.25rem;display: flex;justify-content: space-between;">
						<img @click="reduce" src="../../assets/img/wx/reduce.png" class="imgStyle" />
						<input class="weui-input" style="text-align: center;" v-model="firstCount" />
						<img @click="add" src="../../assets/img/wx/add.png" class="imgStyle" />
					</div>
				</a>
				<a class="weui-cell">
					<div class="weui-cell__hd">
						总计
					</div>
					<div class="weui-cell__bd"
						style="margin-left: 1.25rem;display: flex;justify-content: space-between;">
						1000
					</div>
				</a>
				<a class="weui-cell">
					<button class="weui-btn weui-btn_block" style="background-color: #008000;"> 立即购买</button>
				</a>
			</a>
		</div> -->

	</div>
</template>

<script>
	import Swiper from "swiper";
	import {
		showMsg
	} from '@/apis/common/common.js'
	import apis from '@/utils/apis.js'
	import {
		getCaseDetailByNo,
		getCaseTypeByNo,
		getStaffListByCaseNo
	} from '@/apis/common/ys.js'
	import {
		getCollectByNo
	} from '@/apis/wx/weixinJs.js'
	import constant from '@/utils/constant'

	export default {
		data() {
			return {
				shoucang: require('../../assets/img/wx/shoucang.png'),
				yshoucang: require('../../assets/img/wx/yshoucang.png'),
				caseNo: '', //该课程的编号
				caseType: '', //该课程类型编号
				isCollect: true, //是否已收藏
				collectImgPath: '',
				firstCount: 10, //初始购买节数，小班10，体验1
				caseInfo: {}, //课程详细信息
				caseTypeInfo: {}, //课程类型信息
				collectionInfo: {}, //收藏
				staffList: [], //该课程分配的老师的list数据
				qrcodePath: '', //二維碼
				showChatFlag:false,//显示二维码
			}
		},
		created() {
			this.caseNo = this.$route.params.caseNo;
			this.caseType = this.$route.params.caseType;
			this.getAllInfo();
		},
		methods: {
			//减
			reduce() {
				if (this.firstCount == 0) {
					return;
				}
				//如果小班
				if (true) {
					if (this.firstCount > 0) {
						this.firstCount = this.firstCount - 5;
					}
				}
			},
			//加
			add() {
				//如果小班
				if (true) {
					this.firstCount = this.firstCount + 5;

				}
			},
			//获取课程介绍
			async getCaseDetailByNo() {
				await getCaseDetailByNo(apis.getCaseDetailByNo + "?flag=wx&caseNo=" + this.caseNo).then(res => {
					if (res.resultCode = constant.SUCCESS && res.data) {
						this.caseInfo = res.data;
					}
				})
			},
			//课程类型获取
			async getCaseTypeByNo() {
				await getCaseTypeByNo(apis.getCaseTypeByNo + "?flag=wx&caseType=" + this.caseType).then(res => {
					if (res.resultCode = constant.SUCCESS && res.data) {
						this.caseTypeInfo = res.data
					}
				})
			},
			//获取是否收藏
			getCollectByNo() {

			},
			//获取该课程分配的老师的信息List
			async getStaffListByCaseNo() {
				await getStaffListByCaseNo(apis.getStaffListByCaseNo + "?flag=wx&caseNo=" + this.caseNo).then(res => {
					if (res.resultCode = constant.SUCCESS && res.data) {
						this.staffList = res.data
						this.qrcodePath = res.data[0].qrcodePath;
					}
				});
			},
			async getAllInfo() {
				//初始化获取所有数据
				//1、获取该课程详细信息（包括课程类型）
				this.getCaseDetailByNo()
				this.getCaseTypeByNo();
				//2、获取该课程分配的老师的信息
				this.getStaffListByCaseNo();
				//3、获取该用户收藏课程列表
				this.collectImgPath = this.shoucang
			},
			//点击收藏按钮
			clickCollect() {
				this.isCollect = !this.isCollect;
				if (this.isCollect) {
					this.collectImgPath = this.yshoucang
				} else {
					this.collectImgPath = this.shoucang
				}
			},
			//點擊咨詢彈框
			showChat() {
				this.showChatFlag = true;
			},
			hideChat(){
				this.showChatFlag = false;
			},
		},
		mounted() {

		},
	}
</script>

<style>
	@import "../../assets/css/returnBtn.css";

	.imgs {
		/* background:url(../../assets/img/wx/chat.png); */
		background: url("http://yishewenjian.ngrok2.xiaomiqiu.cn/static/1.jpg");
		background-size: cover;
		overflow: hidden;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		-webkit-filter: blur(15px);
		-moz-filter: blur(15px);
		-o-filter: blur(15px);
		-ms-filter: blur(15px);
		filter: blur(15px);

	}

	.text-white {
		color: white;
	}

	.text-red {
		color: red;
	}

	.imgStyle {
		width: 10%;
		height: 10%;
	}
</style>
